<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class="topBar cw">
			<view class="f-c-b">
				<view class="f40">购物车</view>
				<view @click="chooseFlag=!chooseFlag">{{chooseFlag?'管理':'完成'}}</view>
			</view>
			<view>共{{allNum}}件商品</view>
		</view>

		<!-- 订单部分 -->
		<view class="itemBox">
			<view v-for="(item,index) in dataList" class="item">
				<view class="">{{item.storeName}}</view>
				<view class="item-item2 f-c-c" v-for="(item2,index2) in item.dataList">
					<!-- 	<u-checkbox v-model="item2.checked" shape="circle" active-color="#FF8710" @change="valChange([index,index2])">
					</u-checkbox> -->

					<view @click="toChecked(index,index2)" :class="item2.checked?'tickIconTrue f-c-c':'tickIcon'">
						<u-icon size=20 color='#ffffff' v-show="item2.checked" name='checkmark'></u-icon>
					</view>

					<view class="item-item2-right f-c-c">
						<view class="item-item2-right-img">
							<image :src="item2.url" mode="widthFix"></image>
						</view>
						<view class="item-item2-right-text">
							<view>{{item2.title}}</view>
							<view class="item-item2-right-text f-c-b">
								<view class="item-item2-right-text-price f40">￥{{item2.price}}</view>
								<u-number-box class="item-item2-right-text-numAdd" v-model="item2.num"></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="divilder">
			<u-divider bg-color='#f4f4f4' color="#ccc">商品推荐</u-divider>
		</view>

		<!-- 推荐 -->
		<view class="recommend">
			<view class="recommendAll">
				<view @click="$to(`../product_detail/product_detail`)" v-for="(item,index) in commodityList"
					class="recommendItem f-c">
					<view class="likeImg" @click.stop="item.likeFlag=!item.likeFlag">
						<image :src="item.likeFlag?likeYes:likeNo" mode="widthFix"></image>
					</view>
					<view class="recommendItem-img f-c-c">
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class="recommendItem-img-info f-c-b f30 fw">
						<view>{{item.title}}</view>
						<view class="f35">￥{{item.price}}</view>
					</view>
					<view class="f-c-a f25">
						<view>库存：{{item.stock}}</view>
						<view>浏览：{{item.browse}}</view>
					</view>
					<view class="operation f-c-a">
						<image src="../../static/index/icon_phone.png" mode="widthFix"></image>
						<image src="../../static/index/icon_xx.png" mode="widthFix"></image>
						<image src="../../static/index/icon_fx.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 合计 -->
		<view class="selectAll f-c-b">
			<view class="selectAll-left f-c-c">
				<view class="selectAll-left-left f-c-c">
					<u-checkbox @change="valChange" v-model="selectAllFlag" shape="circle" active-color="#FF8710">
					</u-checkbox>
					<view class="">全选</view>
				</view>
				<view class="selectAll-left-right" v-show="chooseFlag">
					<view>共{{selectNum}}件商品</view>
					<view>合计：<text style="color: #FF2929;">￥{{priceSelect}}</text></view>
				</view>
			</view>
			<view class="selectAll-right f-c-c cw">
				<view @click="toPaid">{{chooseFlag?'结算':'删除'}}</view>
			</view>
		</view>
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAllBtn: true,
				tickFlag: false,
				checked: false,
				priceSelect: 0,
				selectAllFlag: false,
				objNum: 0,
				dataList: [{
					storeName: '喜羊羊店铺',
					status: '退货失败',
					dataList: [{
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}]
				}, {
					storeName: '喜羊羊店铺',
					status: '退货中',
					dataList: [{
						url: '../../static/index/img_sp.png',
						title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
						price: '88.88',
						num: 12
					}]
				}, {
					storeName: '喜羊羊店铺',
					status: '退货成功',
					dataList: [{
							url: '../../static/index/img_sp.png',
							title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
							price: '88.88',
							num: 12
						}, {
							url: '../../static/index/img_sp.png',
							title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
							price: '88.88',
							num: 12
						}, {
							url: '../../static/index/img_sp.png',
							title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
							price: '88.88',
							num: 12
						},
						{
							url: '../../static/index/img_sp.png',
							title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
							price: '88.88',
							num: 12
						},
						{
							url: '../../static/index/img_sp.png',
							title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
							price: '88.88',
							num: 12
						}, {
							url: '../../static/index/img_sp.png',
							title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
							price: '88.88',
							num: 12
						}, {
							url: '../../static/index/img_sp.png',
							title: '甩开油田清爽一夏·【美国版】持妆 DW粉底液...',
							price: '88.88',
							num: 12
						}
					],
				}],
				likeNo: '../../static/index/img_wdz.png',
				likeYes: '../../static/index/img_ydz.png',
				commodityList: [{
					image: '../../static/index/img_sp.png',
					title: '红木',
					stock: 515,
					browse: 200,
					likeFlag: false,
					price: 20
				}, {
					image: '../../static/index/img_sp2.png',
					title: '红木',
					stock: 515,
					browse: 200,
					likeFlag: true,
					price: 100
				}],
				chooseFlag: true
			}
		},
		computed: {
			allNum() {
				let num = 0;
				this.dataList.forEach(item => {
					item.dataList.forEach(item => {
						num += item.num
					})
				})
				return num
			},
			selectNum() {
				let num = 0;
				this.dataList.forEach(item => {
					item.dataList.forEach(item => {
						if (item.checked) {
							num += item.num
						}
					})
				})
				return num
			}
		},
		onLoad() {
			this.dataList.forEach(item => {
				item.dataList.forEach(val => {
					val.checked = false
				})
			})
		},
		watch: {
			selectAllFlag() {
				if (this.selectAllFlag) {
					this.dataList.forEach(item => {
						item.dataList.forEach(val => {
							val.checked = true
						})
					})
				} else if (this.isAllBtn && !this.selectAllFlag) {
					this.dataList.forEach(item => {
						item.dataList.forEach(val => {
							val.checked = false
						})
					})
				}
			},

		},
		methods: {
			toChecked(i1, i2) {
				this.dataList[i1].dataList[i2].checked = !this.dataList[i1].dataList[i2].checked
				this.dataList = JSON.parse(JSON.stringify(this.dataList))

				let flag = true;

				this.priceSelect = 0
				this.dataList.forEach(item => {
					item.dataList.forEach(val => {
						if (!val.checked) {
							flag = false;
							return
						} else {
							this.priceSelect += val.num * Number(val.price)
							this.priceSelect.toFixed(2)
						}
					})
				})
				if (flag) {
					this.selectAllFlag = true
				} else {
					this.isAllBtn = false
					this.selectAllFlag = false
				}
			},
			valChange() {
				this.isAllBtn = true
			},
			toPaid() {
				if (this.chooseFlag) {
					let chooseDataList = []
					let DataList = []
					this.dataList.forEach(item => {
						DataList = []
						item.dataList.forEach(val => {
							if (val.checked) {
								DataList.push(val)
								// console.log(val);
								// console.log(item.storeName);
							// 	chooseDataList.push({
							// 		storeName:item.storeName,
							// 		dataList:val
							// 	})
							}
							// console.log(DataList);
						})
						if(DataList.length!=0){
							chooseDataList.push({
									storeName:item.storeName,
									dataList:DataList
							})
						}
					})
					// console.log(chooseDataList);
					this.$to(`../shoppingCart-prodectDetail/shoppingCart-prodectDetail?dataList=${JSON.stringify(chooseDataList)}`)
				}
			},
		}
	}
</script>

<style>
	.content {
		background-color: #F4F4F4;
		height: 100vh;
	}

	.topBar {
		height: 100rpx;
		width: 100%;
		background-color: #FF8710;
		border-radius: 0 0 50rpx 50rpx;
		padding: 0rpx 40rpx;
	}

	.itemBox {
		position: relative;
		background-color: #F4F4F4;
		/* top: -50rpx; */
	}

	.item {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin: 0rpx 20rpx 20rpx 20rpx;
		border-radius: 20rpx;
	}

	.item-item2 {
		margin: 20rpx 0;
	}

	.item-item2-right-img image {
		width: 160rpx;
	}

	.item-item2-right-img {
		margin-right: 20rpx;
	}

	.item-item2-right-text {
		margin-top: 20rpx;
	}

	.item-item2-right-text-price {
		color: #FF2929;
	}

	.divilder {
		background-color: #F4F4F4;
		width: 100%;
		height: 100rpx;
		margin-top: -70rpx;
		padding: 30rpx 0;
	}

	.recommend {
		padding: 20rpx;
		background-color: #F4F4F4;
	}

	.recommendTitle {
		font-weight: 700;
	}

	.recommendItem-img image {
		width: 300rpx;
		margin: 20rpx 0;
	}

	.recommendItem {
		background-color: #FFFFFF;
		width: 340rpx;
		margin: 6rpx;
		position: relative;
	}

	.recommendItem-img-info {
		margin: 0 20rpx 10rpx 20rpx;
		border-bottom: 1rpx solid #EEEEEE;
		padding-bottom: 10rpx;
	}

	.recommendItem-img-info view:nth-child(2) {
		color: #FF2929;
	}

	.operation {
		border-top: 1rpx solid #EEEEEE;
		margin: 20rpx 0;
		padding-top: 20rpx;
	}

	.operation image {
		width: 33rpx;
	}

	.recommendAll {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.likeImg {
		position: absolute;
		z-index: 999;
		right: -10rpx;
	}

	.likeImg image {
		width: 80rpx;
	}

	.selectAll {
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		width: 100%;
		padding: 0rpx 20rpx;
		height: 90rpx;
		box-shadow: 0 0 8px 1px #999;
	}

	.selectAll-left-left {
		margin-right: 40rpx;
	}

	.selectAll-right view {
		background-color: #FF8710;
		padding: 10rpx 45rpx;
		border-radius: 30rpx;
	}


	.tickIcon,
	.tickIconTrue {
		width: 45rpx;
		height: 40rpx;
		border: 1rpx solid #C0C0C0;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.tickIconTrue {
		border: 0;
		background-color: #FF8710;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</style>
